@import "variables.scss";

.cs {
  &-align-center {
    align-items: center;
  }
  &-text {
    &-italic {
      font-style: italic;
    }
    &-light {
      font-family: $font-family-light;
    }
    &-ultrabold {
      font-family: $font-family-ultrabold;
    }
    &-bold {
      font-family: $font-family-bold;
    }
    &-size-14 {
      font-size: 14px !important;
    }
    &-size-12 {
      font-size: 12px !important;
    }
    &-size-18 {
      font-size: 18px !important;
    }
    &-size-24 {
      font-size: 24px !important;
    }
  }
  &-pt-20 {
    padding-top: 20px;
  }
  &-mt-20 {
    margin-top: 20px;
  }
  &-mb-16 {
    margin-bottom: 1rem;
  }
  &-mb-32 {
    margin-bottom: 2rem;
  }
  &-mt-8 {
    margin-top: 0.5rem;
  }
  &-mb-8 {
    margin-bottom: 0.5rem;
  }
  &-mr-8 {
    margin-right: 8px;
  }
  &-text-right {
    text-align: right;
  }
  &-text-left {
    text-align: left;
  }
  &-text-center {
    text-align: center;
  }
  &-cursor-pointer {
    cursor: pointer;
  }
  &-height-100 {
    height: 100%;
  }
  &-width-100 {
    width: 100%;
  }
  &-height-88 {
    height: 88%;
  }
  &-vertical-middle {
    vertical-align: middle;
  }
  &-relative {
    position: relative;
  }
  &-non-transform {
    text-transform: none;
  }
  &-text-overflow-ellipsis {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
  &-block {
    display: block;
  }
  &-hidden {
    visibility: hidden;
  }
  &-message {
    &.error {
      color: $supportive-color-red-500;
    }
  }
  &-table {
    &-responsive {
      table-layout: fixed;
      width: 100%;
    }
  }
  &-form {
    &-input {
      &-text {
        height: 45px;
      }
    }
  }
  &-flex {
    display: flex;
    flex-direction: row;
    &-column {
      flex-direction: column;
    }
    &-space-between {
      justify-content: space-between;
    }
  }
}
